<template>
    <!--酒店评论-->
    <div class="hotel-commentt">
        <h3 class="titles">{{comment.title}}条真实用户评论</h3>
        <dl class="hotel-score clearfix">
            <dt>
                <div class="num"><em>{{comment.num1}}</em>分</div>{{comment.score1}}
            </dt>
            <dd>
                <div class="num p1"><em>{{comment.num2}}</em></div>{{comment.score2}}
            </dd>
            <dd>
                <div class="num p1"><em>{{comment.num3}}</em></div>{{comment.score3}}
            </dd>
            <dd>
                <div class="num p2"><em>{{comment.num4}}</em></div>{{comment.score4}}
            </dd>
            <dd>
                <div class="num p2"><em>{{comment.num5}}</em></div>{{comment.score5}}
            </dd>
            <dd>
                <div class="num p2"><em>{{comment.num6}}</em></div>{{comment.score6}}
            </dd>
            <dd>
                <div class="num p2"><em>{{comment.num7}}</em></div>{{comment.score7}}
            </dd>
        </dl>

        <!--点评and相关游记-->
        <div class="navbar comm-bars">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <!--全部点评-->
                <el-tab-pane label="全部点评200条" name="first">
                    <!--评论-->
                    <div  class="comm-list sign-font-family" id="_j_comment_list">
                        <div class="comm-item _j_comment_item">
                            <div class="user" style="text-align: left;">
                                <!--头像-->
                                <a class="avatar" href="#" target="_blank">
                                    <img src="https://p1-q.mafengwo.net/s5/M00/07/50/wKgB3FG6s9CAW1uqAAAkHkoZd4w56.jpeg?imageMogr2%2Fthumbnail%2F%2196x96r%2Fgravity%2FCenter%2Fcrop%2F%2196x96%2Fquality%2F90">
                                </a>
                                <a class="name" href="#" target="_blank">那茶</a><br>
                                <span class="lv">LV.24</span>
                                <div class="prop clearfix"></div>
                            </div>

                            <!--内容-->
                            <div class="txt" style="text-align: left">
                                &#xe5d7;&#xf897;&#xe461;&#xffae;&#xd7d0;非&#xa2a2;非&#xa2a2;非&#xa2a2;&#xe461;&#xe631;！&#xe7c4;&#xe305;&#xfad1;&#xf8a9;宽巷子&#xe02d;窄巷子之&#x31db;，出门&#xfad1;&#xe7dd;景区，开窗&#xfad1;&#xe7dd;游&#xe048;，完美！<br>最先接触&#xe461;&#xe7dd;&#xe5d7;&#xf897;停车场，第&#xe28d;次看&#xffb6;&#xe28d;&#xe324;&#xe5d7;&#xf897;连停车场&#xe649;做&#xe461;如此精美，每&#xe324;车&#xffae;&#xe639;进&#xfafc;&#xe62b;打光&#xe600;&#xd7d0;，仿佛每辆车&#xe639;&#xab23;&#xf8b8;进展&#xe60c;&#xe461;感&#xe4c0;。<br>&#x4dcc;堂布&#xd7d0;沉稳&#x4dcc;气<br>&#xf88b;门进&#xe40d;&#xfbd1;&#x31db;&#xe758;能&#xf8be;&#xe758;&#xe1e9;差&#xf8b8;当&#xd7c3;&#xe80a;&#xe58c;员&#xe461;面叫出&#xe71b;吗？！乡下&#xe550;世面见得&#xf884;少&#xe62b;。宽敞明亮&#xe461;&#xfbd1;&#x31db;实&#xf8a9;&#xe7dd;&#xf884;赞&#xe62b;！<br>&#xf8ea;&#xffae;于&#xfbd1;&#x31db;中部，左边&#xe7dd;衣帽&#x31db;，后面&#xe7dd;&#xe264;&#xf02b;&#x31db;<br>&#xf8e6;&#xe53f;无敌&#x4dcc;&#xe461;&#x4dcc;浴缸，如果Co姐&#xf8a9;&#xe461;话&#xe347;&#xe461;能当游&#xf85a;&#xe20b;&#xe62b;。<br>感&#xe4c0;&#xfbd1;&#x31db;&#xf8c5;&#xe461;东西&#xe639;&#xe7dd;如此精美<br>小冰箱&#xf8c5;&#xe461;软饮统统&#xf241;&#xe811;，除&#xe62b;&#xe28d;些&#xe5d7;&#xe7dd;需&#x4de8;收&#xe811;&#xe461;。<br>开关&#xe600;计&#xe649;非&#xa2a2;独&#xe328;<br>暖暖&#xe461;&#xf8ea;头灯&#xd7c5;&#xe550;&#xe28d;种温馨感。<br>面对如此精美&#xe461;&#xe5d7;&#xf897;&#xe758;&#xe1e9;&#xe639;快沦陷&#xf8a9;&#xf8c5;面&#xe62b;
                            </div>
                            <!--图像-->
                            <div class="img clearfix">
                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://p1-q.mafengwo.net/s12/M00/E4/09/wKgED1xGs9CABhVJAAIu6l9aJzA46.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>

                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://p1-q.mafengwo.net/s12/M00/E3/F9/wKgED1xGs8iAfzTrAARL2RL63yA68.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>

                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://b1-q.mafengwo.net/s12/M00/E3/FA/wKgED1xGs8mAWWyiAASEYp4Xr9o33.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>

                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://n1-q.mafengwo.net/s12/M00/E3/FB/wKgED1xGs8mACqbGAAQqNZfqQwY66.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>

                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://n1-q.mafengwo.net/s12/M00/E3/F7/wKgED1xGs8eACH6sAATYVz2P7mI65.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>

                                <a href="javascript:;" class="_j_album_comment_trigger">
                                    <img src="https://p1-q.mafengwo.net/s12/M00/BA/87/wKgED1uoN0GAWuYvAANuAR3MDsA99.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                                </a>
                            </div>

                            <div class="comm-meta" style="text-align: left">
                                <span class="icon-bg comm-star comm-star5"></span>
                                <span class="time">2019-01-22</span>
                                <a class="icon-bg icon-goldcomment" href="javascript:;" target="_blank"></a>
                                <span class="from-notes">
                                    <i class="icon-bg icon-notes"></i>
                                    此条点评来自游记
                                    <a href="javascript:;" target="_blank">《成都三部曲 |【乐享天府慢生活】》</a>
                                </span>
                                <span class="r-report comm-report _j_comment_report">举报</span>
                            </div>

                            <!--回复组件-->
                            <Replybox></Replybox>
                        </div>

                        <!--分页-->
                        <div class="page">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="200">
                            </el-pagination>
                        </div>


                    </div>
                </el-tab-pane>

                <!--相关游记-->
                <el-tab-pane label="相关游记" name="second">
                    <div class="comm-item _j_comment_item">
                        <div class="user" style="text-align: left;">
                            <!--头像-->
                            <a class="avatar" href="#" target="_blank">
                                <img src="https://p1-q.mafengwo.net/s5/M00/07/50/wKgB3FG6s9CAW1uqAAAkHkoZd4w56.jpeg?imageMogr2%2Fthumbnail%2F%2196x96r%2Fgravity%2FCenter%2Fcrop%2F%2196x96%2Fquality%2F90">
                            </a>
                            <a class="name" href="#" target="_blank">那茶</a><br>
                            <span class="lv">LV.24</span>
                            <div class="prop clearfix"></div>
                        </div>

                        <!--内容-->
                        <div class="txt" style="text-align: left">
                            &#xe5d7;&#xf897;&#xe461;&#xffae;&#xd7d0;非&#xa2a2;非&#xa2a2;非&#xa2a2;&#xe461;&#xe631;！&#xe7c4;&#xe305;&#xfad1;&#xf8a9;宽巷子&#xe02d;窄巷子之&#x31db;，出门&#xfad1;&#xe7dd;景区，开窗&#xfad1;&#xe7dd;游&#xe048;，完美！<br>最先接触&#xe461;&#xe7dd;&#xe5d7;&#xf897;停车场，第&#xe28d;次看&#xffb6;&#xe28d;&#xe324;&#xe5d7;&#xf897;连停车场&#xe649;做&#xe461;如此精美，每&#xe324;车&#xffae;&#xe639;进&#xfafc;&#xe62b;打光&#xe600;&#xd7d0;，仿佛每辆车&#xe639;&#xab23;&#xf8b8;进展&#xe60c;&#xe461;感&#xe4c0;。<br>&#x4dcc;堂布&#xd7d0;沉稳&#x4dcc;气<br>&#xf88b;门进&#xe40d;&#xfbd1;&#x31db;&#xe758;能&#xf8be;&#xe758;&#xe1e9;差&#xf8b8;当&#xd7c3;&#xe80a;&#xe58c;员&#xe461;面叫出&#xe71b;吗？！乡下&#xe550;世面见得&#xf884;少&#xe62b;。宽敞明亮&#xe461;&#xfbd1;&#x31db;实&#xf8a9;&#xe7dd;&#xf884;赞&#xe62b;！<br>&#xf8ea;&#xffae;于&#xfbd1;&#x31db;中部，左边&#xe7dd;衣帽&#x31db;，后面&#xe7dd;&#xe264;&#xf02b;&#x31db;<br>&#xf8e6;&#xe53f;无敌&#x4dcc;&#xe461;&#x4dcc;浴缸，如果Co姐&#xf8a9;&#xe461;话&#xe347;&#xe461;能当游&#xf85a;&#xe20b;&#xe62b;。<br>感&#xe4c0;&#xfbd1;&#x31db;&#xf8c5;&#xe461;东西&#xe639;&#xe7dd;如此精美<br>小冰箱&#xf8c5;&#xe461;软饮统统&#xf241;&#xe811;，除&#xe62b;&#xe28d;些&#xe5d7;&#xe7dd;需&#x4de8;收&#xe811;&#xe461;。<br>开关&#xe600;计&#xe649;非&#xa2a2;独&#xe328;<br>暖暖&#xe461;&#xf8ea;头灯&#xd7c5;&#xe550;&#xe28d;种温馨感。<br>面对如此精美&#xe461;&#xe5d7;&#xf897;&#xe758;&#xe1e9;&#xe639;快沦陷&#xf8a9;&#xf8c5;面&#xe62b;
                        </div>
                        <!--图像-->
                        <div class="img clearfix">
                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://p1-q.mafengwo.net/s12/M00/E4/09/wKgED1xGs9CABhVJAAIu6l9aJzA46.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>

                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://p1-q.mafengwo.net/s12/M00/E3/F9/wKgED1xGs8iAfzTrAARL2RL63yA68.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>

                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://b1-q.mafengwo.net/s12/M00/E3/FA/wKgED1xGs8mAWWyiAASEYp4Xr9o33.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>

                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://n1-q.mafengwo.net/s12/M00/E3/FB/wKgED1xGs8mACqbGAAQqNZfqQwY66.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>

                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://n1-q.mafengwo.net/s12/M00/E3/F7/wKgED1xGs8eACH6sAATYVz2P7mI65.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>

                            <a href="javascript:;" class="_j_album_comment_trigger">
                                <img src="https://p1-q.mafengwo.net/s12/M00/BA/87/wKgED1uoN0GAWuYvAANuAR3MDsA99.jpeg?imageMogr2%2Fthumbnail%2F%21500x300r%2Fgravity%2FCenter%2Fcrop%2F%21500x300%2Fquality%2F90"/>
                            </a>
                        </div>

                        <div class="comm-meta" style="text-align: left">
                            <span class="icon-bg comm-star comm-star5"></span>
                            <span class="time">2019-01-22</span>
                            <a class="icon-bg icon-goldcomment" href="javascript:;" target="_blank"></a>
                            <span class="from-notes">
                                    <i class="icon-bg icon-notes"></i>
                                    此条点评来自游记
                                    <a href="javascript:;" target="_blank">《成都三部曲 |【乐享天府慢生活】》</a>
                                </span>
                            <span class="r-report comm-report _j_comment_report">举报</span>
                        </div>

                        <!--回复组件-->
                        <Replybox></Replybox>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <!--写点评-->
            <!--<a class="btn-adds" href="javasxript:;">
                <i class="icon-bg icon-plus"></i>写点评
            </a>-->
        </div>
    </div>
</template>

<script>
    import Replybox from "@/components/information/Replybox";
    export default {
        name: "HotelComment",
        props:["comment"],
        components:{
            Replybox
        },
        data(){
            return{
                activeName: 'first'
            };
        },
        methods:{
            //点击
            handleClick(tab,event){
                console.log(tab,event);
            }
        }
    }
</script>

<style scoped>
    .hotel-commentt{
        /*padding: 607px 0;*/
        margin-top: 607px;
    }
    .hotel-commentt h3.titles{
        margin-bottom: 40px;
        text-align: center;
        font-size: 24px;
        font-weight: normal;
        color: #333;
        letter-spacing: 1px;
    }

    /*评论*/
    .comm-meta .comm-report {
        display: none;
        font-size: 12px;
        color: #999;
        vertical-align: middle;
    }

    .comm-item:hover .comm-report {
        display: inline-block;
    }

    .comm-report:hover,
    .comm-reply-report:hover {
        color: #FF8A00;
    }

    .reply-box .comm-reply-report {
        display: none;
        font-size: 12px;
        color: #999;
        margin-left: 10px;
    }

    .comment_reply_item:hover .comm-reply-report {
        display: inline-block;
    }

    .hotel-report-dialog label {
        margin: 0 3px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
        padding: 10px 0;
    }

    .el-pagination.is-background >>> .el-pager li:not(.disabled).active {
        background-color: #ff9d00;
        color: #fff;
    }
    .el-pagination.is-background >>> .btn-next,
    .el-pagination.is-background >>> .btn-prev,
    .el-pagination.is-background >>> .el-pager li {
        background-color: #ffffff00;
    }

    /*点评*/
    .navbar >>> .el-tabs__active-bar{
        background-color: #e6a23c;
    }

    .navbar >>> .el-tabs__item:hover{
        color: #ff9d00;
    }

    .navbar >>> .el-tabs__item.is-active{
        color: #ff9d00;
        font-size: 15px;
        font-weight: bold;
    }

    .navbar >>> .el-tabs__item{
        font-size: 15px;
    }

/*    .comm-bars{
        height: 38px;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
    }*/

/*    .comm-bars .btn-adds {
        float: right;
        margin-right: 15px;
        padding: 0 10px 0 8px;
        line-height: 30px;
        background-color: #ffb200;
        border-radius: 3px;
        color: #fff;
        text-align: center;
        !*margin-top: -385px;*!
        position: relative;
        top: -385px;
    }*/

/*    .comm-bars .btn-adds i {
        margin-right: 3px;
        width: 16px;
        height: 17px;
        background-position: -150px -140px;
        vertical-align: middle
    }

    .comm-bars .btn-adds:hover {
        text-decoration: none;
        background-color: #ff9d00
    }*/
</style>